<template>
  <CommonContainer title="替车入库信息">
    <el-form :model="form" ref="informationForCars" label-width="100px" :rules="type == 'detail' ? {} : rules" :label-position="type == 'detail' ? 'right' : 'top'">
      <!-- 替车入库信息 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="还车日:" prop="returnCarDate">
            <el-date-picker v-if="type !== 'detail'" style="width: 80%" v-model="form.returnCarDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择还车日"> </el-date-picker>
            <span v-if="type == 'detail'">{{ form.returnCarDate | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入库里程:" prop="inboundMileage">
            <el-input v-if="type !== 'detail'" style="width: 80%" v-model="form.inboundMileage"></el-input>
            <span v-if="type == 'detail'">{{ form.inboundMileage | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入库里程照片:" prop="inboundMileageOss">
            <image-common v-model="form.inboundMileageOss" :disabled="type == 'detail'" :up-type="2" :limit="1" info="入库里程照片"></image-common>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入库油量:" prop="inboundOilQuantity">
            <el-input v-if="type !== 'detail'" style="width: 80%" v-model="form.inboundOilQuantity"></el-input>
            <span v-if="type == 'detail'">{{ form.inboundOilQuantity | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入库油量照片:" prop="inboundOilQuantityOss">
            <image-common v-model="form.inboundOilQuantityOss" :disabled="type == 'detail'" :limit="1" :up-type="2" info="入库油量照片"></image-common>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="车头照片:" prop="carPhotoOss">
            <image-common v-model="form.carPhotoOss" :disabled="type == 'detail'" :up-type="2" info="车头照片"></image-common>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="20">
          <el-form-item label="备注:" prop="remark">
            <el-input v-if="type !== 'detail'" type="textarea" placeholder="请输入说明" v-model="form.remark" maxlength="500" :rows="5" show-word-limit></el-input>
            <span v-if="type == 'detail'">{{ form.remark | filterNull }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </CommonContainer>
</template>
<script>
export default {
  name: 'informationForCars',
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
  },
  data() {
    return {
      rules: {
        returnCarDate: [
          {
            required: true,
            message: '请选择还车日',
            trigger: 'change',
          },
        ],
        inboundMileage: [
          {
            required: true,
            message: '请输入入库里程',
            trigger: 'blur',
          },
        ],
        inboundMileageOss: [
          {
            required: true,
            message: '请选择入库里程照片',
            trigger: 'change',
          },
        ],
        inboundOilQuantity: [
          {
            required: true,
            message: '请输入入库油量',
            trigger: 'blur',
          },
        ],
        inboundOilQuantityOss: [
          {
            required: true,
            message: '请选择入库油量照片',
            trigger: 'change',
          },
        ],
        carPhotoOss: [
          {
            required: true,
            message: '请选择车头照片',
            trigger: 'change',
          },
        ],
      },
    }
  },
  created() {},
  methods: {
    valid() {
      return new Promise(async (resolve) => {
        let result = true
        let refs = Object.values(this.$refs)
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index]
          if (Object.prototype.toString.call(ref) == '[object Array]') {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i]
              if (element?.valid) {
                let rc = await element?.valid?.()
                result = result && rc
              }
              if (element?.validate) {
                let rf = await this._valid(ref)
                result = result && rf
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, 'form_validate')
                result = result && rf
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.()
              result = result && rc
            }
            if (ref?.validate) {
              let rf = await this._valid(ref)
              result = result && rf
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, 'form_validate')
              result = result && rf
            }
          }
        }
        resolve(result)
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
